<template>
  <view class="s">
    <uv-search placeholder="请输入搜索内容" :height="35" shape="square" @change="change" v-model="skey" @search="dos"
               @custom="dos" @focus="focus" :focus="true"></uv-search>
  </view>
  <view class="relatesearch" v-if="skey && !dosearchStatus">
    <view class="skeys go" @click="search(skey)">立即搜索
      <text class="sf">{{ skey }}</text>
    </view>
    <view class="realkeys">
      <view class="sfc" v-for="(item,i) in realkeys" :key="i" v-html="item.ctitle" @click="search(item.title)"></view>
    </view>
  </view>
  <view class="searchEnd" v-if="loading">
    <uv-loading-icon></uv-loading-icon>
  </view>
  <view class="searchList" v-if="searchList.length>0">
    <view class="sitem" v-for="(item,idx) in searchList" @click="goview(item.wid)">
      <view class="title" v-html="item.title"></view>
      <view class="desc" v-html="item.content"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  doRelatedQuery,
  doSearch
} from "../../common/api";
import {
  ref,
  reactive,
  onMounted
} from 'vue'

const skey = ref('')
const loading = ref(false)
const dosearchStatus = ref(false)
const realkeys = ref([])
const searchList = ref([])
const focus = () => {
  loading.value = false
  dosearchStatus.value = false
  if (skey.value != '') {
    doRelatedQuery({key: skey.value}).then(r => {
      //给r.data循环中的title搜索词加蓝色
      r.data.map(item => {
        item.ctitle = item.title.replace(skey.value, `<span style="color:red">${skey.value}</span>`)
      })
      realkeys.value = r.data
    })
  }
}
const change = (e) => {
  e = e.trim()
  if (e != '') {
    loading.value = false
    dosearchStatus.value = false
    skey.value = e
    doRelatedQuery({key: e}).then(r => {
      //给r.data循环中的title搜索词加蓝色
      r.data.map(item => {
        item.ctitle = item.title.replace(e, `<span style="color:red">${e}</span>`)
      })
      realkeys.value = r.data
    })
  } else {
    realkeys.value = []
    skey.value = ''
  }
}

const search = (title) => {
  skey.value = title
  dosearchStatus.value = true
  loading.value = true
  goSearch(skey.value, 1)
}
const dos = (keys) => {
  search(keys)
  goSearch(keys, 1)
}
const goSearch = (keys, page) => {
  let params = {
    key: keys,
    page: page
  }
  doSearch(params).then(r => {
    loading.value = false
    searchList.value = r.data
  }).catch(e => {
    loading.value = true
  })
}
const goview = (wid) => {
  uni.navigateTo({
    url: '/pages/thread/view?wid=' + wid
  })
}
</script>

<style lang="scss">

.sitem {
  .title {

    font-weight: bold;
    margin-bottom: 20rpx;

     em {
      color: red !important;
      font-style: normal;
    }
  }

  .desc {
     em {
      color: red !important;
      font-style: normal;
    }
  }
}
</style>
<style scoped lang="scss">
.searchList {
  .sitem {
    background: #fff;
    margin: 20rpx 0;
    padding: 30rpx;

    .title {
      border-bottom:1px solid #eee;
      padding-bottom:20rpx;
      font-size: 32rpx;
      margin-bottom: 20rpx;
      color:#222;
      > em {
        color: red !important;
      }
    }

    .desc {
      font-size: 28rpx;
      color: #999;
      line-height: 1.5;

    }
  }
}

.s {
  background: #fff;
  padding: 0 30rpx 30rpx;
}

.searchEnd {
  padding: 30rpx;
}

.relatesearch {
  background: #fff;
  padding: 0 30rpx 30rpx 30rpx;

  .sf {
    color: $baseColor;
    font-weight: bold;
  }


  .realkeys {
    border-top: 1px solid #eee;
    margin-top: 30rpx;

    .sfc {
      padding: 28rpx 0;
      border-bottom: 1px solid #eee;
    }
  }
}
</style>
